<template>
  <gui-page
    ref="pageRef"
    :api-loading-status="apiLoadingStatus"
    class="gui-bg-white"
    :custom-footer="true"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white gui-border-b" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">推荐有奖</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex gui-column gui-padding">
        <!--   数据列表     -->
        <view>
          <view class="gui-text-small gui-flex gui-padding-small gui-align-items-center gui-space-between">
            <view class="gui-primary-color">我的账户余额</view>
            <view class="gui-h2 gui-primary-text gui-margin-x gui-color-orange gui-flex1">20.00元</view>
            <view @tap.stop="openHelpModel">
              <text class="gui-icons gui-color-gray" style="margin-right: 10rpx">&#xe628;</text>
              <text>提现规则</text>
            </view>
          </view>
          <button class="gui-button-mini gui-bg-orange gui-border-radius-full gui-margin-top" type="default" @tap.stop="submit">
            <text class="gui-icons gui-color-white gui-button-text-mini">提现</text>
          </button>
        </view>
        <view style="margin-top: 80rpx">
          <view>推荐规则说明：每邀请一个人，得5元...</view>
          <view>支持分享到微信群或者个人。</view>
          <view v-if="!list.length" class="gui-flex flex-center" style="margin-top: 50rpx">
            <button class="gui-button gui-noborder" open-type="share" :plain="true" type="default">
              <text class="gui-icons gui-color-gray gui-margin" style="font-size: 80rpx">&#xe625;</text>
            </button>
          </view>
          <view class="gui-flex gui-wrap flex-center">
            <view v-if="list.length" class="gui-flex gui-align-items-center gui-wrap gui-padding" style="margin-top: 50rpx">
              <view v-for="item in 7" :key="item" class="gui-list-image ucenter-face gui-relative gui-margin" style="margin-right: 15rpx">
                <image
                  class="gui-list-image ucenter-face-image"
                  mode="aspectFill"
                  src="https://images.unsplash.com/photo-1662695094714-966fc339a2e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"
                />
              </view>
              <button class="gui-button gui-noborder" open-type="share" :plain="true" type="default">
                <text class="gui-icons gui-color-gray gui-margin" style="margin-right: 15rpx; font-size: 80rpx">&#xe625;</text>
              </button>
            </view>
            <view class="gui-flex flex-center flex-column gui-align-items-center">
              <view class="gui-text gui-flex1">共7人</view>
              <!--              <view class="gui-text gui-flex1 gui-margin-top">-->
              <!--                <text class="gui-color-orange">邀请码：JD1222K23</text>-->
              <!--                <text class="gui-margin-x" @tap.stop="copy">复制</text>-->
              <!--              </view>-->
            </view>
          </view>
        </view>
      </view>
      <!--  弹窗    -->
      <gui-popup ref="helpModelRef" :z-index="9999">
        <view class="gui-relative gui-box-shadow gui-img-in gui-bg-white gui-padding gui-border-radius">
          <view style="margin-top: 60rpx">
            <text class="gui-text-small">01、02、03代 表的意思分别是 国家重点学科、 省重点学科、不 是重点学科。</text>
          </view>
          <!-- 关闭按钮 -->
          <text class="gui-block modal-close gui-icons gui-absolute-rt" @tap.stop="closeHelpModel">&#xe78a;</text>
        </view>
      </gui-popup>
    </template>
    <template #gFooter>
      <copyright-info />
    </template>
  </gui-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

const helpModelRef = ref<any>(null)
const pageRef = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
// 用于记录是否有 api 请求正在执行
const apiLoadingStatus = ref<boolean>(false)
const list = ref<Array<any>>([1, 2, 3, 4, 5, 6, 7])
const mpShare = ref<any>({
  // 分享的标题
  title: '邀请码',
  // 分享的页面路径
  path: '/pages/index/index?code=JD1222K23',
  // 封面图片路径
  imageUrl: '/static/logo.svg',
})
// 提交表单
const submit = () => {
  console.log('submit')
  uni.navigateTo({
    url: '../cash/index?money=20',
  })
}
// 弹窗
const openHelpModel = () => {
  helpModelRef.value.open()
}
const closeHelpModel = () => {
  helpModelRef.value.close()
}

// 复制
const copy = () => {
  console.log('copy')
  uni.setClipboardData({
    data: 'value',
    // success: function () {
    //   //调用方法成功
    //   console.log('复制成功')
    // },
  })
}
onLoad(() => {
  // #if MP
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
  })
  // #endif
})
// 分享给好友
onShareAppMessage((res: any) => {
  console.log(res)
  return mpShare.value
})
// 分享到朋友圈
onShareTimeline(() => {
  return mpShare.value
})
</script>

<style scoped>
.modal-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
</style>
